<template>
    <div class="block <?php echo $this->tableName;?>_add">
        <div class="block-title">
            <div class="block-options pull-right">
            </div>
            <h2><?php echo $this->table_comment.'添加';?></h2>
        </div>
        <form action="" method="post" class="form-horizontal form-bordered">
            <?php foreach($this->form_columns as $key=>$value):?>
            <?php if(!is_array($value['type']) && $value['type']!=='textarea'){ ?>
            <div class="form-group">
                <label class="col-sm-3 control-label"
                       for="example-input-<?php echo $value['name'];?>"><?php echo $value['title']?></label>
                <div class="col-sm-4">
                    <input type="<?php echo $value['type']?>" v-model.trim="Info.<?php echo $value['name']?>"
                           id="example-input-<?php echo $value['name'];?>" name="example-input-small"
                           class="form-control input-sm" placeholder="请填写<?php echo $value['title'].'...'; ?>" @input="$v.Info.<?php echo $value['name'];?>.$touch();">
                    <span v-if="!$v.Info.<?php echo $value['name'];?>.required &&  Info.<?php echo $value['name'];?>!=''">请填<?php echo $value['title'];?></span>
                    <span v-if="!$v.Info.<?php echo $value['name'];?>.minLength && Info.<?php echo $value['name'];?>!=''">抱歉<?php echo $value['title'];?>必须6位</span>
                </div>
            </div>
            <?php }elseif(is_array($value['type']) && $value['type']['real_type']=='radio'){ ?>
            <div class="form-group">
                <label class="col-md-3 control-label"><?php echo $value['title'];?></label>
                <div class="col-md-9">
                    <?php foreach($value['type']['other_value'] as $k=>$v) { ?>
                    <label class="radio-inline" for="example-inline-radio<?php echo $k+1;?>">
                        <input type="<?php echo $value['type']['real_type'];?>"
                               id="example-inline-radio<?php echo $k+1;?>" v-model="Info.<?php echo $value['name']?>"
                               value="<?php echo $v['value'];?>" name="example-inline-radios"><?php echo $v['title']; ?>
                    </label>
                    <?php }?>
                </div>
            </div>
            <?php }elseif(is_array($value['type']) && $value['type']['real_type']=='checkbox'){ ?>
            <div class="form-group">
                <label class="col-md-3 control-label"><?php echo $value['title']; ?></label>

                <div class="col-md-9">
                    <?php foreach($value['type']['other_value'] as $ky=>$vl){ ?>
                    <label class="checkbox-inline" for="example-inline-checkbox<?php echo $ky+1;?>">
                        <input type="checkbox" id="example-inline-checkbox<?php echo $ky+1;?>"
                               name="example-inline-checkbox1" v-model="Info.<?php echo $value['name'];?>"
                               value="<?php echo $vl['value'];?>" > <?php echo $vl['title']; ?>
                    </label>
                    <?php } ?>
                </div>
            </div>
            <?php }elseif(!is_array($value['type']) && $value['type']==='textarea'){ ?>
            <div class="form-group">
                <label class="col-md-3 control-label"
                       for="example-textarea-input"><?php echo $value['title']; ?></label>

                <div class="col-md-4">
                    <textarea id="example-textarea-input" v-model.trim="Info.<?php echo $value['name'];?>"
                              name="example-textarea-input" rows="7" class="form-control"
                              placeholder="请填写<?php echo $value['title'].'...'; ?>" @input="$v.Info.<?php echo $value['name'];?>.$touch();"></textarea>
                    <span v-if="!$v.Info.<?php echo $value['name'];?>.required && Info.<?php echo $value['name'];?>!=''">请填<?php echo $value['title'];?></span>
                    <span v-if="!$v.Info.<?php echo $value['name'];?>.minLength && Info.<?php echo $value['name'];?>!=''">抱歉<?php echo $value['title'];?>必须6位</span>
                </div>
            </div>
            <?php }elseif(is_array($value['type']) && $value['type']['real_type']==='select'){ ?>
            <div class="form-group">
                <label for="select_<?php echo $value['name']?>" class="col-md-3 control-label"><?php echo $value['title']; ?></label>
                <div class="col-md-4">
                    <select class="form-control" id="select_<?php echo $value['name']?>" v-model="Info.<?php echo $value['name']?>">
                        <option value="">请选择<?php echo $value['title'];?></option>
                        <?php foreach($value['type']['other_value'] as $ke=>$val){ ?>
                        <option value="<?php echo $val['value'];?>"><?php echo $val['title'];?></option>
                        <?php }?>
                    </select>
                </div>
            </div>
            <?php }?>
            <?php endforeach;?>
            <div class="form-group form-actions">
                <div class="col-sm-9 col-sm-offset-3">
                    <button type="button" class="btn btn-effect-ripple btn-primary" @click="add_data($v.Info)">添加<?php echo $this->table_comment;?>
                    </button>
                </div>
            </div>
        </form>
        <transition name="loading" mode="out-in">
            <loading v-if="loadAt"></loading>
        </transition>
    </div>
</template>
<script type="text/ecmascript-6">
    import http from '../../static/http/http';
    import {mapState,mapMutations} from 'vuex'
    import {required, minLength, between, email} from 'vuelidate/lib/validators'
    import loading    from '../../components/comment/loading/loading';
    const ERROR_STATUS          =1001;
    export default{
        name:"<?php echo $this->tableName;?>_add",
        data(){
                return {
                    Info: {
                    <?php foreach($this-> form_columns as $value){
                            if (!is_array($value['type'])) {
                                echo "{$value['name']}: '' ,";
                            }elseif(is_array($value['type']) && $value['type']['real_type'] === 'checkbox'){
                                echo "{$value['name']}: [] ,";
                            }elseif(is_array($value['type']) && $value['type']['real_type'] === 'select' ){
                                echo "{$value['name']}: '' ,";
                            }
                         }
                    ?>
                 }
            }
        }, created(){

        },
        validations: {
        Info:{
            <?php foreach($this->form_columns as $v){
                    $head = "{$v['name']}:";
                    $content = 'required,minLength: minLength(6)';
                    echo $head.'{'."{$content}".'},';
              }
           ?>
        }
    },computed:{
    ...mapState({
            loadAt: 'loading'
        })
    },methods:{
    ...mapMutations({
            set_loadAt: 'set_loading'
        }),
        add_data(validate){
          validate.$touch(); //  打开全部验证
          if(validate.$error){return false};  //这里验证成功是false 如果失败就是true
          this.set_loadAt({code:100,meta:true});
          let data      ={ };
          <?php
               foreach($this-> form_columns as $item){
                 echo  "data.{$item['name']}=this.Info.{$item['name']};";
               }
          ?>
          // 发送请求可以采用 es7 语法 async 加await 机制 做处理 利用fetch api
          // 发送请求需要验证后端生成uuid 加上过期时间  与lorck 配合使用 过期需重新登录验证 如有session_id 必须对session_id 进程验证 或者看看jwt 采取header头验证 严格采用rest风格
          this.apiPost(`<?php echo "{$this->init_uri}";?>`,data).then((response)=>{
                let response_data       =response.data.list;
                let error_code          =response_data.status;
                if(error_code!==ERROR_STATUS){
                    // 这里需要引入提示框，或者根据实际的需求在做处理
                this.set_loadAt({code:120,meta:false,custom_info:response.data.info});
            }
        }).catch((response)=>{
                // 如果失败了那么我们还是的对我们的错误进程处理错误机制处理待完善
                this.set_loadAt({code:102,meta:false});
            });
        }
    },mixins:[http],
    components:{loading}
    }
</script>
<style type="stylus" scoped>
    .loading-enter-active, .loading-leave-active {
        transition: all .4s;
    }

    .loading-enter, .loading-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
</style>
